<template>
  <div class="home">
    <div id="__nuxt">
      <!---->
      <div id="__layout">
        <div data-fetch-key="0" class="app light macwk-animation">
          <top :message1="acticve" />
          <div>
            <section class="layout-index pc-model">

              <div class="outsection">
                <!-- 首页轮播图 -->
                <el-carousel indicator-position="outside" class="index1 banner-index mb-6 Thecarousel"
                  :height="dataHeight" :interval="3000" arrow="always">
                  <el-carousel-item style="" v-for="(item, id) in Carousel" :key="id">
                    <div>
                      <div  class="index-banner el-carousel el-carousel--horizontal">
                        <div class="el-carousel__container" style="height: 450px">
                          <i class="el-icon-arrow-right"></i>

                          <div  class="el-carousel__item is-active is-animating"
                            style="transform: translateX(0px) scale(1)">
                            <div  class="index section white1 h-450 position-relative radius-4x d-flex align-items-center">
                              <div  class="bg-shape-holder">
                                <span  class="big-round-one"></span>
                                <span  class="big-round-two"></span>
                                <span  class="big-round-three"></span>
                              </div>
                              <div  class="w-600 pl-10 position-relative z-index-9999">
                                <h2 >{{ item.title }}</h2>
                                <p  class="text-muted fs-18">
                                  {{ item.introduce }}
                                </p>
                                <a :href="item.url" target="_blank" class="btn btn-theme btn-round px-6">
                                  {{ item.button }}</a>
                              </div>
                              <div  class="index-banner-image-two">
                                <img  :src="item.img" />
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </div>
              <div class="container">
                <div class="index-special row mb-6">
                  <div class="col-3">
                    <a class="">
                      <div class="macwk-card bg-gradient-green hover-shadow-6 py-3 text-center"
                           style="will-change: transform;transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);">
                        <div class="macwk-card__collapsible-content vs-con-loading__container">
                          <div class="macwk-card__body">
                            <h6 class="mb-0 text-white">
                              <i class="icon-upload-cloud fs-22 mr-3 v-m-3"></i>
                              <span>微服务</span>
                            </h6>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                  <div class="col-3">
                    <a>
                      <div class="macwk-card bg-gradient-orange hover-shadow-6 py-3 text-center">
                        <div class="macwk-card__collapsible-content vs-con-loading__container">
                          <div class="macwk-card__body">
                            <h6 class="mb-0 text-white">
                              <i class="icon-user fs-22 mr-3 v-m-3"></i>
                              <span>后台管理</span>
                            </h6>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                  <div class="col-3">
                    <a class="">
                      <div class="macwk-card bg-gradient-blue hover-shadow-6 py-3 text-center">
                        <div class="macwk-card__collapsible-content vs-con-loading__container">
                          <div class="macwk-card__body">
                            <h6 class="mb-0 text-white">
                              <i class="el-icon-mobile-phone fs-22 mr-3 v-m-3"></i>
                              <span>移动端</span>
                            </h6>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                  <div class="col-3">
                    <a class="">
                      <div class="macwk-card bg-gradient-purple hover-shadow-6 py-3 text-center">

                        <div class="macwk-card__collapsible-content vs-con-loading__container">
                          <div class="macwk-card__body">
                            <h6 class="mb-0 text-white">
                              <i class="el-icon-monitor fs-22 mr-3 v-m-3"></i>
                              <span>门户系统</span>
                            </h6>
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </section>
            <div class="mobile-model">
              <div class="d-flex layout-min-full-height justify-content-center align-items-center">
                <div class="text-center" style="width: 80%; margin: 0px auto">
                  <h1 class="mb-4">哇，窗口太小啦</h1>
                  <p class="mb-6">请调整浏览器窗口大小或者请使用手机查看！</p>
                </div>
              </div>
            </div>
          </div>
          <foot />
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import top from "./components/top.vue";
import foot from "./components/foots.vue";

import { mapState } from 'vuex'
export default {
  name: "home",
  components: { top, foot },
  computed: {
    ...mapState(['glabledata'])
  },
  data() {
    return {
      acticve: "nav-link active",
      Carousel: [
          {
              "id": 1,
              "title": "开源项目",
              "introduce": "Example 是一个快速软件开发框架，它旨在帮助开发人员更高效地构建应用程序。该框架提供了一系列工具和组件，以简化开发过程并提高开发速度。",
              "button": "立即前往",
              "img": "https://i.imgtg.com/2023/07/18/OFhkNN.png",
              "url": "https://gitee.com/example-cloud"
          },
          {
              "id": 2,
              "title": "Vue 文档",
              "introduce": "易学易用，性能出色，适用场景丰富的 Web 前端框架。渐进式JavaScript 框架",
              "button": "立即前往",
              "img": "https://i.imgtg.com/2023/07/18/OFhzuL.png",
              "url": "https://cn.vuejs.org/"
          }
      ],
    };
  },
  created() {
  },
  props: {
    dataHeight: {
      type: String,
      default: "450px",
    },
  },
  methods: {

  },
};
</script>

<style scoped>
.index1 {
  z-index: 555;
}

.outsection {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Thecarousel {
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
  width: 1435px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
<style lang="scss" scoped>

.h-150 {
  margin-top: -20px;
  margin-bottom: -55px;
  height: 150px !important;
}

.containers {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 20px;
}

.containers {
  width: 1170px;
  padding: 0;
}

.bg-fixed {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

.text-center {
  text-align: center;
}

.index-special {

  margin-top: 35px;
}

.text-light h2 {
  color: #ffffff;
}

.col-md-offset-2 {
  margin-left: 16.66666667%;
}

.col-md-8 {
  width: 66.66666667%;
}

.col-md-8 {
  float: left;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

</style>
